<template>
	<div class="main">
		<!-- 菜单 -->
		<div class="menu">
			<Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" class="menu-box">
				<Menu active-name="index" theme="dark" width="auto" :class="menuitemClasses" @on-select="choosedMenu">
					<template v-for="menu in menuList">
						<MenuItem v-if="!menu.children" :name="menu.path" :key="menu.name" @click.native="handlerMenuL1(menu)" :class="{'active':menu.name === menuCurrent}">
						<Icon :type="menu.name" :key="menu.name"></Icon>
						<span :key="menu.meta.title">{{menu.meta.title}}</span>
						</MenuItem>
						<Submenu v-if="menu.children" :name="menu.path" :key="menu.name">
							<template slot="title">
								<Icon :type="menu.name" :key="menu.name"></Icon>
								<span :key="menu.meta.title">{{menu.meta.title}}</span>
							</template>
							<template v-for="child in menu.children">
								<MenuItem :name="child.path" :key="child.name" @click.native="handlerMenuL2(child)">
								<Icon :type="child.name" :key="child.name"></Icon>
								<span :key="child.meta.title">{{child.meta.title}}</span>
								</MenuItem>
							</template>
						</Submenu>
					</template>
				</Menu>
			</Sider>
		</div>
		<!-- 头部 -->
		<div class="header-box" :style="{paddingLeft:siderLeft?'78px':'200px'}">
			<div class="header">
				<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px 0 20px'}" type="md-menu" size="24"></Icon>
				<h4>温度监测</h4>
			</div>
			<!-- 标签页面 -->
			<div class="tags">
				<div class="tag-warp">
					<div class="tag-inner">
						<Tag type="dot" v-for="(tag, index) in pageTags" :key="index" :closable="tag.name !== 'home'" class="tag-item" :color="index === tagCurrent ? '#3399ff' : '#e9eaec'" :name="tag.path" @click.native="activeTag(tag, index)" @on-close="closeTag(tag.name, index)">
							{{tag.meta.title}}
						</Tag>
					</div>
					<div class="close-tag">
						<Select v-model="closeType" placeholder="标签选项" @on-change="changeClose">
							<Option v-for="item in closeOption" :value="item.value" :key="item.value">{{ item.label }}</Option>
						</Select>
					</div>
				</div>
			</div>
		</div>
		<!-- 内容区域 -->
		<div class="content-box" :style="{left:siderLeft?'78px':'200px'}">
			<div class="content">
				<keep-alive>
					<router-view/>
				</keep-alive>
			</div>
		</div>
	</div>
</template>

<script>
import {
	closeType
} from '../assets/js/select-data'
export default {
	data() {
		return {
			tagCurrent: 0,
			isCollapsed: false,
			siderLeft: false, // 是否左滑
			menuCurrent: 'home', // 默认选中的菜单
			closeType: '', // 关闭的标签类别
			closeOption: closeType, // 关闭选项
			brumblist: '', // 路由集合
		}
	},
	computed: {
		rotateIcon() {
			return [
				'menu-icon',
				this.isCollapsed ? 'rotate-icon' : ''
			];
		},
		menuitemClasses() {
			return [
				'menu-item',
				this.isCollapsed ? 'collapsed-menu' : ''
			]
		},
		// 导航
		menuList() {
			return this.$store.state.menuList;
		},
		// 页面标签
		pageTags() {
			return this.$store.state.openPageList;
		}
	},
	methods: {
		set_crumb() {
			this.brumblist = this.$route.matched
			this.$route.matched.forEach((item, index) => {
				item.meta.title === '首页' ? item.path = '/' : this.$route.path === item.path ? this.title = item.meta.title : '';
			})
		},
		collapsedSider() {
			this.$refs.side1.toggleCollapse();
			this.siderLeft = !this.siderLeft;
		},
		// 选择菜单
		choosedMenu(name) {
			this.$router.push({
				path: name
			})
		},
		// 点击当前菜单（一级）
		handlerMenuL1(menu) {
			this.$store.commit('set_pageTags', menu)
		},
		// 点击菜单（二级）
		handlerMenuL2(child) {
			this.$store.commit('set_pageTags', child)
		},
		// 点击标签
		activeTag(tag, index) {
			this.$router.push(tag.path)
			this.menuCurrent = tag.name
			this.tagCurrent = index
		},
		// 关闭标签
		closeTag(name, index) {
			this.$store.commit('remove_tag', name)
			this.tagCurrent = this.pageTags.length - 1
		},
		// 关闭标签（其他，全部）
		changeClose(val) {
			if (val === 'other') {
				this.$store.commit('remove_other', this.tagCurrent)
			} else {
				this.$store.commit('remove_all')
			}
		}
	},
	created() {
		// 菜单
		this.$store.commit('set_menuList')
		// 菜单标签
		this.$store.commit('start_pageTags')
	},
	watch: {
		$route() {
			this.set_crumb()
		}
	}
}
</script>

<style lang="less" scoped>
@import "../assets/css/base";
.full {
	.size(100%, 100%);
}

.shodow {
	box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
}

.main {
	position: absolute;
	.full; // 菜单
	.menu {
		height: 100%;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		transition: width 0.3s;
		z-index: 21;
		.menu-box {
			.full;
			background-color: #495060;
		}
	} // 头部
	.header-box {
		padding-left: 200px;
		transition: padding 0.3s;
		position: fixed;
		.sizing;
		.size(100%, 100px);
		.shodow;
		z-index: 20;
		.header {
			height: 60px;
			background-color: #fff;
			position: relative;
			.shodow;
			z-index: 11;
			display: flex;
			align-items: center;
		}
		.tags {
			height: 40px;
			position: relative;
			background-color: #f0f0f0;
			.tag-warp {
				position: relative;
				.sizing;
				.full;
				padding-right: 120px;
				.tag-inner {
					position: absolute;
					padding: 2px 10px;
					overflow: visible;
					white-space: nowrap;
					transition: left 0.3s ease;
				}
				.close-tag {
					display: none;
					position: absolute;
					right: 0;
					top: 0;
					.sizing;
					text-align: center;
					.size(110px, 100%);
					background-color: #fff;
					padding-top: 8px; // 关闭选项
					/deep/ .ivu-select {
						width: 80px;
						.ivu-select-selection {
							background: #2d8cf0 linear-gradient(#5cadff, #2d8cf0);
							box-shadow: 0 1px 5px #999;
							text-shadow: 0 -1px 1px #405060;
							height: 26px;
							>div {
								>span,
								>i {
									color: #fff;
								}
								>span {
									padding: 0;
									margin-left: -10px;
									text-align: center;
									height: 26px;
									line-height: 26px;
								}
								>i {
									margin-top: -6px;
								}
							}
						}
						.ivu-select-dropdown {
							box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
						}
					}
				}
			}
		}
	} // 内容
	.content-box {
		left: 200px;
		position: absolute;
		top: 103px;
		right: 0;
		bottom: 0;
		overflow: auto;
		background-color: #f0f0f0;
		transition: left 0.3s;
		z-index: 100;
		.content {
			padding: 10px;
			height: 100%;
			box-sizing: border-box;
			overflow: hidden;
		}
	}
}
</style>
